import React, { Component } from 'react'
import "../assets/css/Reg.css"
import Header from "../components/DefaultHeader"


export default class Reg extends Component {
    state={
        phone:'',
        nickname:'',
        password:''
    }
    sure(){
        const {phone,nickname,password} = this.state     
        if(phone===''){
            alert('手机号不可为空');
            return
        }
        if(nickname===''){
            alert('昵称不可以为空');
            return
        }
        if(password===''){
            alert('密码不可以为空');
            return
        }
        this.$axios.post('/register',{phone,nickname,password}).then(res=>{
            // 清空表单
            this.setState({
                phone:'',
                nickname:'',
                password:''
            })
            // 提示注册成功
            alert('注册成功，即将跳转到登录页面')
            // 跳转到登录
            this.props.history.push('/login')
        })
    }
    render() {
        const {phone, nickname, password} = this.state
        return (
            <div id='reg'>
                <Header title="会员注册" right_text="登录" right_method={()=>this.props.history.push('/login')}/>
                <div className="container">
                    <div className="logo"></div>
                    <div className="form">

                        <div className="form-group">
                            <input value={phone} onChange={(event)=>this.setState({phone:event.target.value.trim()})} type="text" placeholder="手机号" />
                        </div>
                        <div className="form-group">
                            <input value={nickname} onChange={(event)=>this.setState({nickname:event.target.value.trim()})} type="text" placeholder="昵称" />
                        </div>
                        <div className="form-group">
                            <input value={password} onChange={(event)=>this.setState({password:event.target.value.trim()})} type="password" placeholder="密码" />
                        </div>
                        <div className="form-group">
                            <button className="btn-gray" onClick={()=>this.sure()}>注册</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
